<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
    <link rel="stylesheet" href="/apps/css/bootstrap.min.css">
    <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
    <style>
        body { background: #f7f9fb; }
        .main-card { background: #fff; border-radius: 18px; box-shadow: 0 2px 16px rgba(0,0,0,0.07); padding: 2rem 1.5rem; }
        .merchant-title { font-size: 1.2rem; font-weight: 700; color: #2EA6E0; margin-bottom: 0.5rem; }
        .group-title { font-size: 1.05rem; font-weight: 600; color: #444; margin: 1.2rem 0 0.5rem 0; }
        .service-card { display: flex; align-items: center; background: #f8fafc; border-radius: 12px; box-shadow: 0 1px 4px #e0e7ef44; padding: 0.7rem 1rem; margin-bottom: 0.5rem; transition: box-shadow 0.2s; }
        .service-card:hover { box-shadow: 0 4px 16px #2ea6e022; }
        .avatar-preview { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; border: 1.5px solid #e0e7ef; background: #fafbfc; margin-right: 0.7rem; }
        .qrcode-preview { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; border: 1.5px solid #e0e7ef; background: #fafbfc; margin-right: 0.7rem; }
        .service-info { flex: 1; min-width: 0; }
        .service-title { font-weight: 500; color: #333; }
        .service-desc { color: #888; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: inline-block; vertical-align: middle; }
        .action-btns { display: flex; gap: 0.5rem; }
        .action-btns .btn { min-width: 70px; }
        @media (max-width: 768px) {
            .main-card { padding: 1rem 0.2rem; }
            .service-card { flex-direction: column; align-items: flex-start; padding: 0.7rem 0.5rem; }
            .service-desc { max-width: 100px; }
            .action-btns .btn { min-width: 48px; font-size: 0.95rem; }
        }
    </style>
</head>
<body>
<div class="container py-4">
    <div class="main-card">
        <h2 class="mb-4 text-center">服务台配置列表</h2>
        {{#each configs}}
            <div class="mb-4 pb-3 border-bottom">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <span class="merchant-title">{{merchant_name}}</span>
                        <span class="badge bg-secondary ms-2">{{mer_code}}</span>
                        <span class="text-muted ms-3"><i class="fa fa-phone"></i> {{phone}}</span>
                    </div>
                    <div class="action-btns">
                        <a class="btn btn-sm btn-primary" href="/apps/helpdesk/edit/{{mer_code}}"><i class="fa fa-edit"></i> 编辑</a>
                        <a class="btn btn-sm btn-secondary" href="/apps/helpdesk/{{mer_code}}" target="_blank"><i class="fa fa-eye"></i> 预览</a>
                    </div>
                </div>
                {{#each groups}}
                    <div class="group-title">{{group_name}}</div>
                    <div class="row">
                        {{#each services}}
                        <div class="col-lg-6 col-md-12 mb-2">
                            <div class="service-card">
                                {{#if avatar}}
                                    <img class="avatar-preview" src="{{avatar}}" alt="头像" title="头像">
                                {{/if}}
                                <div class="service-info">
                                    <span class="service-title">{{title}}</span>
                                    {{#if desc}}
                                        <span class="service-desc ms-2" title="{{desc}}">{{desc}}</span>
                                    {{/if}}
                                </div>
                                {{#if qrcode}}
                                    <img class="qrcode-preview" src="{{qrcode}}" alt="二维码" title="二维码">
                                {{/if}}
                            </div>
                        </div>
                        {{/each}}
                    </div>
                {{/each}}
            </div>
        {{/each}}
        <div class="text-center mt-4">
            <a href="/apps/helpdesk/" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> 返回客服首页</a>
        </div>
    </div>
</div>
<script src="/apps/js/bootstrap.bundle.min.js" defer></script>
</body>
</html>